<template>
    <!-- 修改资料 -->

    <div>
        <!--  v-if="visible"  @click.self="handleClose" -->
        <!-- 内容主题区域 -->
        <el-card>
            <el-form label-width="85px" :model="form"  label-position="right" ref="formRef" :rules="formRules" enctype="multipart/form-data" >
                <el-tabs v-model="activeName">
                    <el-tab-pane label="基本信息" name="first">           
                         <el-card>
                <template #header>
                    <div class="card-header">
                         <span>基本信息</span>
                    </div>
                 </template>
                    <el-row>
                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                            <el-form-item label="产品编号" prop="companyId" >
                                <el-input v-model="form.a"></el-input>
                             </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                            <el-form-item label="产品名称" prop="deptId">
                                <el-input v-model="form.b"></el-input>
                             </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                            <el-form-item label="产品类别" prop="number">
                                <el-tree-select
                                    v-model="form.c"
                                    :data="positionData"
                                    :render-after-expand="false"
                                    check-strictly=true
                                />
                             </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                            <el-form-item label="规格说明" prop="name" >
                                <el-input v-model="form.d"></el-input>
                             </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                            <el-form-item label="单位" prop="positionId">
                                <el-select v-model="form.e" clearable placeholder="请选择：" >
                                    <el-option v-for="item in emKindOptions" 
                                        :key="item.code" 
                                        :label="item.name"
                                        :value="item.code">
                                    </el-option>
                                </el-select>
                             </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                            <el-form-item label="商品种类" prop="inDate">
                                <el-select v-model="form.f" clearable placeholder="请选择：" >
                                    <el-option v-for="item in emKindOptions" 
                                        :key="item.code" 
                                        :label="item.name"
                                        :value="item.code">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                            <el-form-item label="区域" prop="positionId">
                                <el-select v-model="form.quyu" clearable placeholder="请选择：" >
                                    <el-option v-for="item in emKindOptions" 
                                        :key="item.code" 
                                        :label="item.name"
                                        :value="item.code">
                                    </el-option>
                                </el-select>
                             </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                            <el-form-item label="库存数" prop="inDate">
                                <el-input-number v-model="form.itemIndex" :min="0"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                            <el-form-item label="店铺库存" prop="positionId">
                                <el-switch
                                    v-model="form.visible"
                                    size="large"
                                    inline-prompt
                                    :active-icon="Check"
                                    :inactive-icon="Close"
                                    active-value="1"
                                    inactive-value="0"
                                />
                             </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                            <el-form-item label="库存提醒数" prop="inDate">
                                <el-input-number v-model="form.itemIndex" :min="0"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                            <el-form-item label="副标题" prop="positionId">
                                <el-input v-model="form.kucun"></el-input>
                             </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                            <el-form-item label="产品标签" prop="inDate">
                                <el-input v-model="form.kucun"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
            </el-card></el-tab-pane>
            <el-tab-pane label="价格相关" name="second">
            <el-card>
                <template #header>
                    <div class="card-header">
                         <span>价格相关</span>
                    </div>
                 </template>
                    <el-row>
                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
                            <el-form-item label="会员价" prop="phone" >
                                <el-input-number v-model="form.itemIndex" :min="0"/>
                             </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
                            <el-form-item label="零售价" prop="email">
                                <el-input-number v-model="form.itemIndex" :min="0"/>
                             </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
                            <el-form-item label="原价" prop="email">
                                <el-input-number v-model="form.itemIndex" :min="0"/>
                             </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
                            <el-form-item label="至多余额支付" prop="phone" >
                                <el-input-number v-model="form.itemIndex" :min="0"/>
                             </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
                            <el-form-item label="至少现金支付" prop="email">
                                <el-input-number v-model="form.itemIndex" :min="0"/>
                             </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
                            <el-form-item label="至多代金券字符" prop="email">
                                <el-input-number v-model="form.itemIndex" :min="0"/>
                             </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
                            <el-form-item label="PV值" prop="phone" >
                                <el-input-number v-model="form.itemIndex" :min="0"/>
                             </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
                            <el-form-item label="至少购买数" prop="email">
                                <el-input-number v-model="form.itemIndex" :min="0"/>
                             </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
                            <el-form-item label="至多购买数" prop="email">
                                <el-input-number v-model="form.itemIndex" :min="0"/>
                             </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                            <el-form-item label="赠送代金券" prop="phone" >
                                <el-input-number v-model="form.itemIndex" :min="0"/>
                             </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                            <el-form-item label="按实付金额赠送代金券" prop="email">
                                <template v-for="(item, index) in genderList" :key="index">
                                    <el-radio :label="item.code" size="large">{{ item.name }}</el-radio>
                                </template>
                             </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                            <el-form-item label="在线支付" prop="email">
                                <template v-for="(item, index) in genderList" :key="index">
                                    <el-radio :label="item.code" size="large">{{ item.name }}</el-radio>
                                </template>
                             </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                            <el-form-item label="出厂价" prop="phone" >
                                <el-input v-model="form.itemIndex"/>
                             </el-form-item>
                        </el-col>
                    </el-row>
            </el-card>
           </el-tab-pane>
           <el-tab-pane label="运费相关" name="third">
            <el-card>
                <template #header>
                    <div class="card-header">
                         <span>运费设置</span>
                         <el-button class="button" text @click="show.value=!show.value">点击显示</el-button>
                    </div>
                </template>
                <div v-if="show">
                    <el-row>
                        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                            <el-form-item label="包邮" prop="idCard" >
                                <el-input v-model="form.idCard" style="width: 300px;"></el-input>
                             </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                            <el-form-item label="英文名" prop="englishName">
                                <el-input v-model="form.englishName" style="width: 300px;"></el-input>
                             </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                            <el-form-item label="人员类别" prop="employeeKind">
                                <el-select v-model="form.employeeKind" clearable placeholder="请选择：" >
                                    <el-option v-for="item in emKindOptions" 
                                        :key="item.code" 
                                        :label="item.name"
                                        :value="item.code">
                                    </el-option>
                                </el-select>
                             </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                            <el-form-item label="学历" prop="degree" >
                                <el-select v-model="form.degree" clearable placeholder="请选择：" >
                                    <el-option v-for="item in degreeOptions" 
                                        :key="item.code" 
                                        :label="item.name"
                                        :value="item.code">
                                    </el-option>
                                </el-select>
                             </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-form-item label="生日" prop="birthday">
                            <el-date-picker
                                v-model="form.birthday"
                                type="date" 
                                value-format="YYYY-MM-DD"
                                placeholder="请选择"
                                style="width: 300px;"
                            />
                        </el-form-item>
                    </el-row>
                </div>
                    <el-row>
                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                            <el-form-item label="部门负责人" prop="1" >
                                <el-radio-group v-model="form.deptLeader"  style="margin-top: -4px;">
                                    <el-radio label="1" size="large">是</el-radio>
                                    <el-radio label="0" size="large">否</el-radio>
                                </el-radio-group>
                             </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                            <el-form-item label="公司负责人" prop="companyLeader">
                                <el-radio-group v-model="form.companyLeader"  style="margin-top: -4px;">
                                    <el-radio label="1" size="large">是</el-radio>
                                    <el-radio label="0" size="large">否</el-radio>
                                </el-radio-group>
                             </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                            <el-form-item label="状态" prop="status" >
                                <el-radio-group v-model="form.status"  style="margin-top: -4px;">
                                    <el-radio label="normal" size="large">启用</el-radio>
                                    <el-radio label="disable" size="large">停用</el-radio>
                                </el-radio-group>
                             </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                            <el-form-item label="性别" prop="gender" >
                                <el-radio-group v-model="form.gender"  style="margin-top: -4px;">
                                    <template v-for="(item, index) in genderList" :key="index">
                                        <el-radio :label="item.code" size="large">{{ item.name }}</el-radio>
                                    </template>
                                </el-radio-group>
                             </el-form-item>
                        </el-col>
                    </el-row>
            </el-card>
        </el-tab-pane>
        <el-tab-pane label="照片备注" name="fourth">
            <el-card>
                <template #header>
                    <div class="card-header">
                         <span>照片备注</span>
                    </div>
                 </template>
                    <el-row>
                        <el-col >
                            <el-form-item label="备注" prop="remark" >
                                <el-input v-model="form.remark" style="width: 600px;"></el-input>
                             </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-form-item label="上传照片" prop="file" >
                            <el-upload
                                ref="uploadRef"
                                :class="{'hide':hideUpload}"
                                :file-list="fileList"
                                action=""
                                :limit="1"
                                list-type="picture-card"
                                :on-change = "handleChange"
                                :on-preview="handlePictureCardPreview"
                                :on-remove="handleRemove"
                                :auto-upload="false"
                                :http-request="submitUpload"
                            >
                            <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" /> -->
                                <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
                            </el-upload>
                            <el-dialog v-model="dialogVisible">
                                <img :src="dialogImageUrl" alt="Preview Image" w-full style="width: 100%;"/>
                            </el-dialog>
                        </el-form-item>
                    </el-row>
            </el-card>
        </el-tab-pane>
                </el-tabs>
        </el-form>
            <div>
                <el-button @click="updateVisible" style="margin-left: 230px;">取 消</el-button>
                <el-button type="primary" @click="addUser(formRef)">确 定</el-button>
            </div>
        </el-card>
    </div>
</template>

<script setup>
import {  reactive,ref, getCurrentInstance, watch, onMounted } from 'vue';
import{ ElNotification } from 'element-plus';
import { Plus, UploadFilled } from '@element-plus/icons-vue'

let { proxy } = getCurrentInstance(); // proxy.$API.system.

const emit = defineEmits('update')
const props = defineProps({
    paramsData: {
        type: Object,
        defalut: {}
    }
}) 


const activeName = ref('first')
// 添加用户数据的对象
const  form = reactive({
    number:'',
    name:'',
    companyId:'',
    deptId:'',
    positionId:'',
    inDate:'',
    address:'',
    idCard:'',
    birthday:'',
    employeeKind:'',
    degree:'',
    englishName:'',
    deptLeader:'0',
    companyLeader:'0',
    messageNo:'',
    status:'',
    remark:'',
    gender:'0',
      });

const formRef=ref()
// const formRules = reactive({    
//     number: [
//           { required: true, message: "请输入编号", trigger: "blur" },
//         ],
//     name: [
//           { required: true, message: "请输入名称", trigger: "blur" },
//         ]
// })


const updateVisible = (val) => {
    layer.close(props.paramsData.value.dialogId)
}




</script>

<style lang="less" scoped>
.el-card{
		margin-bottom:20px; 
	}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.hide {
    :deep(.el-upload--picture-card){ 
      display: none;
  }
}
</style>
<style >
</style>

